<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>
		<script src="/static/js/vue.min.js"></script>
		<script src="/static/js/jquery-3.2.1.min.js"></script>
	</head>
	<style type="text/css">
		table{
			width: 100%;
		}
		table td{
			overflow: hidden;
			text-align: center;
		}
		table td span{
			float: left;
			width: 50%;
			text-align: center;
		}
		table td span:nth-child(1){
			word-break: break-all;
		}
		table td span:nth-child(2){
			width: 49%;
			border-left: 1px solid #595656;
		}
		.picfoot button{
			width: 80%;
			margin:5% 10%;
			line-height: 300%;
			background-color: orange;
			color: white;
			font-size: 15px;
		}
		.timeselect {
			text-align: center;;
		}
		.timeselect button{
			width: 20%;
			margin:5% 10%;
			line-height: 200%;
			background-color: orange;
			color: white;
			font-size: 15px;
		}
		ul,li{
			list-style-type:none;
			margin:0;
			padding:0; 
		}
		.count {
			width: 100%;
			text-align: center;
			/*border: 1px solid #000;*/
			margin-top: 10px;
		}
		.count ul{
			float: left;
			min-width:15%;
			border: 1px solid #000;
			/*clear:both;*/
		}
		.count ul li{
			border: 1px solid #000;
			height: 30px;
		}
	</style>
	<body>
		<div id="app">
			<table border="1" cellspacing="" cellpadding="" style="width: 24%;float: left;">
				<tr >
					<td>gprs</td>
				</tr>
				<tr class="none" v-if="macList.gprs == 0"><td>暂无数据</td></tr>
				<tr v-for=" i in macList.gprs" v-if="macList.gprs">
					<td>
						<span>{{ i.mac }}</span>
						<span>{{ i.collect_time }}</span>
					</td>
				</tr>
			</table>

			<table border="1" cellspacing="" cellpadding="" style="width: 24%;float: left;">
				<tr >
					<td>博媒</td>
				</tr>
				<tr class="none" v-if="macList.bm == 0"><td>暂无数据</td></tr>
				<tr v-for=" i in macList.bm" v-if="macList.bm">
					<td>
						<span>{{ i.mac }}</span>
						<span>{{ i.collect_time }}</span>
					</td>
				</tr>
			</table>

			<table border="1" cellspacing="" cellpadding="" style="width: 24%;float: left;">
				<tr >
					<td>datasky路由探针</td>
				</tr>
				<tr class="none" v-if="macList.datesky == 0"><td>暂无数据</td></tr>
				<tr v-for=" i in macList.datesky" v-if="macList.datesky">
					<td>
						<span>{{ i.mac }}</span>
						<span>{{ i.collect_time }}</span>
					</td>
				</tr>
			</table>

			<table border="1" cellspacing="" cellpadding="" style="width: 24%;float: left;">
				<tr >
					<td>udp探针</td>
				</tr>
				<tr class="none" v-if="macList.tz006 == 0"><td>暂无数据</td></tr>
				<tr v-for=" i in macList.tz006" v-if="macList.tz006">
					<td>
						<span>{{ i.mac }}</span>
						<span>{{ i.collect_time }}</span>
					</td>
				</tr>
			</table>
			<div class="picfoot"><button @click="getList">点击刷新</button></div>
			<div style="clear: both;"></div>
			<div class="timeselect">
				起始时间：<input type="datetime-local" :value="start_time" v-model="start_time">
				结束时间：<input type="datetime-local" :value="end_time" v-model="end_time"><br />
				<button @click="countMac">点击提交</button>
			</div>
			<div class="count" v-if="macCount.type">
				<ul>
					<li></li>
					<li>总采集数</li>
					<li>去重采集数</li>
				</ul>
				<ul>
					<li>gprs</li>
					<li>{{ macCount.count.gprs.count }}</li>
					<li>{{ macCount.count.gprs.uicount }}</li>
				</ul>
				<ul>
					<li>博媒</li>
					<li>{{ macCount.count.bm.count }}</li>
					<li>{{ macCount.count.bm.uicount }}</li>
				</ul>
				<ul>
					<li>datasky路由探针</li>
					<li>{{ macCount.count.datesky.count }}</li>
					<li>{{ macCount.count.datesky.uicount }}</li>
				</ul>
				<ul>
					<li>udp探针</li>
					<li>{{ macCount.count.tz006.count }}</li>
					<li>{{ macCount.count.tz006.uicount }}</li>
				</ul>
				<ul>
					<li>声牙</li>
					<li>{{ macCount.count.shengya.count }}</li>
					<li>{{ macCount.count.shengya.uicount }}</li>
				</ul>
				<div style="clear: both;"></div>
			</div>
			<div class="count" v-if="macCount.type">
				<ul>
					<li>所有设备采集数</li>
					<li>所有设备去重采集数</li>
				</ul>
				<ul>
					<li>{{ macCount.count.all_count }}</li>
					<li>{{ macCount.count.all_uicount }}</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	// function resize(){
	// 	location.href = 'http://testcaiji.bomeiyi.net/facility/Index/overview';
	// }
	var app = new Vue({
		el: '#app',
		data:{
			macList:[],
			macCount:{
				count: {
					bm:{
						count:'',
						uicount:'',
					},
					gprs:{
						count:'',
						uicount:'',
					},
					datesky:{
						count:'',
						uicount:'',
					},
					tz006:{
						count:'',
						uicount:'',
					},
					shengya:{
						count:'',
						uicount:'',
					},
					all_count: null,
					all_uicount: null,
				},
				type: false,
			},
			start_time: null,
			end_time: null,
		},
		mounted:function(){
		  	this.getList()
		},
		methods:{
			getList:function(){
				var that=this
				$.ajax({
		  			type:'post',
		  			data:{},
		  			url: '/facility/index/getList',
		  			async:true
		  		}).then(function(res){
		  			if(res.success){
		  				console.log(res)
						that.macList = res.data
					}
		  		})
			},
			countMac:function(){
				var that=this
				$.ajax({
		  			type:'post',
		  			data:{'start_time': that.start_time, 'end_time': that.end_time},
		  			url: '/facility/index/count_mac_time',
		  			async:true
		  		}).then(function(res){
		  			console.log(res)
		  			if(res.success){
						that.macCount.count = res.data.count
						that.macCount.type = true
		  			}
		  		})
			},
		},
	})
	</script>
</html>
